﻿@{
    Layout = null;
}
@*添加奖项*@
<style>
    .myTabs.nav-tabs{
        position:relative;
    }
    .myTabs.nav-tabs > li.active > a, .myTabs.nav-tabs > li.active > a:focus, .myTabs.nav-tabs > li.active > a:hover {
        color: #555;
        cursor: default;
        background-color: #fff;
        border: 1px solid #ddd;
        border-bottom-color: transparent;
    }
    .myTabs.nav-tabs > li.show-info {
        position:absolute;
        right:0;
        min-width:300px;
        min-height:100px;
        top:40px;
    }
    .myTabs.nav-tabs > li.show-info #create-quan {
        color: white;
        padding: 10px 15px;
        background-color: #EE5F51;
        display: flex;
        align-items: center;
        justify-content:space-between;
        border-radius: 4px;
          
    }
    .form-horizontal .form-group {
        margin-bottom: 15px;
        margin-top: 15px;
    }
</style>

<div>
    <ul class="myTabs nav nav-tabs" role="tablist">
        <li role="presentation" class="active">
            <a href="#Coupon" id="Coupon-tab" role="tab" data-toggle="tab" aria-controls="Coupon" aria-expanded="true">优惠券</a>
        </li>
        <li role="presentation" class="">
            <a href="#RedPackage" role="tab" id="RedPackage-tab" data-toggle="tab" aria-controls="RedPackage" aria-expanded="false">红包</a>
        </li>
        <li role="presentation" class="">
            <a href="#Flow" role="tab" id="Flow-tab" data-toggle="tab" aria-controls="Flow" aria-expanded="false">流量</a>
        </li>
        <li class="show-info"></li>
    </ul>

    <div class="tab-content">
        <!--优惠券-->
        <div role="tabpanel" class="tab-pane fade active in" id="Coupon" aria-labelledby="Coupon-tab">
            <form method="post" id="CouponForm" class="form-horizontal">
                <div class="list-con">
                    <div class="form-group">
                        <div class="col-md-2 text-right">选择奖品：</div>
                        <div class="col-md-5">
                            <select name="JackpotID" id="" class="form-control JackpotID"></select>
                            <input type="hidden" name="CouponType" value="" />
                            <input type="hidden" name="type" value="" />
                        </div>
                        <div class="col-md-3"></div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-2 text-right">奖品名称：</div>
                        <div class="col-md-5">
                            <input type="text" name="Name" id="Name" autofocus placeholder="客户中奖显示字样" class="form-control" />
                        </div>
                        <div class="col-md-3"></div>
                    </div>
                    <div class="form-group special">
                        <div class="col-md-2 text-right">中奖提示：</div>
                        <div class="col-md-5">
                            <input type="text" name="Congrats" autofocus placeholder="客户中奖后显示提示" class="form-control" />
                        </div>
                        <div class="col-md-3"></div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-2 text-right">奖品数量：</div>
                        <div class="col-md-5">
                            <input type="number" name="TotalNums" placeholder="奖品数量,此奖励送出总量, 送完为止" class="form-control" />
                        </div>
                        <div class="col-md-3"></div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-2 text-right">中奖概率：</div>
                        <div class="col-md-5">
                            <input type="text" readonly="readonly" name="Rate" placeholder="" class="Rate form-control" />
                        </div>
                        <div class="col-md-3 text-left">%</div>
                    </div>
                </div>
            </form>
        </div>
        <!--红包-->
        <div role="tabpanel" class="tab-pane fade" id="RedPackage" aria-labelledby="RedPackage-tab">
            <form id="redPacketForm" class="form-horizontal">
                <div class="list-con">
                    <div class="form-group">
                        <div class="col-md-2 text-right">选择奖品：</div>
                        <div class="col-md-5">
                            <select name="JackpotID" id="" class="form-control JackpotID"></select>
                            <input type="hidden" name="CouponType" value="" />
                            <input type="hidden" name="type" value="" />
                        </div>
                        <div class="col-md-3"></div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-2 text-right">奖品名称：</div>
                        <div class="col-md-5">
                            <input type="text" name="Name" id="Name" autofocus placeholder="客户中奖显示字样" class="form-control" />
                        </div>
                        <div class="col-md-3"></div>
                    </div>
                    <div class="form-group special">
                        <div class="col-md-2 text-right">中奖提示：</div>
                        <div class="col-md-5">
                            <input type="text" name="Congrats" autofocus placeholder="客户中奖后显示提示" class="form-control" />
                        </div>
                        <div class="col-md-3"></div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-2 text-right">奖品数量：</div>
                        <div class="col-md-5">
                            <input type="number" name="TotalNums" placeholder="奖品数量,此奖励送出总量, 送完为止" class="form-control" />
                        </div>
                        <div class="col-md-3"></div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-2 text-right">中奖概率：</div>
                        <div class="col-md-5">
                            <input type="text" readonly="readonly" name="Rate"  placeholder="" class="form-control" />
                        </div>
                        <div class="col-md-3 text-left">%</div>
                    </div>
                </div>
            </form>
        </div>
        <!--流量包-->
        <div role="tabpanel" class="tab-pane fade" id="Flow" aria-labelledby="Flow-tab">
            <form id="FlowForm" method="post" class="form-horizontal">
                <div class="list-con">
                    <div class="form-group">
                        <div class="col-md-2 text-right">选择奖品：</div>
                        <div class="col-md-5">
                            <select name="JackpotID" id="" class="form-control JackpotID"></select>
                            <input type="hidden" name="type" value="" />
                        </div>
                        <div class="col-md-3"></div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-2 text-right">奖品名称：</div>
                        <div class="col-md-5">
                            <input type="text" name="Name" id="Name" autofocus placeholder="客户中奖显示字样" class="form-control" />
                        </div>
                        <div class="col-md-3"></div>
                    </div>
                    <div class="form-group special">
                        <div class="col-md-2 text-right">中奖提示：</div>
                        <div class="col-md-5">
                            <input type="text" name="Congrats" autofocus placeholder="客户中奖后显示提示" class="form-control" />
                        </div>
                        <div class="col-md-3"></div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-2 text-right">奖品数量：</div>
                        <div class="col-md-5">
                            <input type="number" name="TotalNums" placeholder="奖品数量,此奖励送出总量, 送完为止" class="form-control" />
                        </div>
                        <div class="col-md-3"></div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-2 text-right">中奖概率：</div>
                        <div class="col-md-5">
                            <input type="text" readonly="readonly"  name="Rate" placeholder="" class="form-control" />
                        </div>
                        <div class="col-md-3 text-left">%</div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    $(function () {
        //总概率计算
        function totalRate(currenRate) {
            var totalRate = 0
            $('.con .right .award-con .add.chooce').each(function (i, e) {
                totalRate += parseInt($(this).attr('rate'));
            })
            if (currenRate + totalRate > 100) {
                $.L.msgError('当前概率和其他奖项概率的总和，已经超出100%！请检查！');
            }
        }
        GetAward(2);
        $('a[data-toggle="tab"][role="tab"]').on('shown.bs.tab', function (e) {
            //console.log(e.target)  // newly activated tab   //console.log(e.relatedTarget)  //previous active tab
            if ($(e.target).text() === "优惠券") {
                GetAward(2);
                $("#CouponForm input[name='TotalNums'][type='number']").keyup(function () {
                    var num = parseInt($('#Num').text());
                    if ($(this).val() > num) {
                        $.L.msgError('奖品数量不能大于商品数' + num);
                    }
                    else {
                        var rate = (parseInt($(this).val()) / num).toFixed(2) * 100;
                        $(this).parent().parent().next().find("input[name='Rate']").val(rate);
                        totalRate(rate);
                    }
                    return false;
             
                })
            }
            else if ($(e.target).text() === "红包") {
                GetAward(1);
                $("#redPacketForm input[name='TotalNums'][type='number']").keyup(function () {
                    var num = parseInt($('#Num').text());
                    if ($(this).val()>num)
                    {
                        $.L.msgError('奖品数量不能大于商品数' + num);
                    }
                    else {
                        var rate = (parseInt($(this).val()) / num).toFixed(2) * 100;
                        $(this).parent().parent().next().find("input[name='Rate']").val(rate);
                        totalRate(rate);
                    }
                    return false;
                })
            }
            else {
                GetAward(3);
                $("#FlowForm input[name='TotalNums'][type='number']").keyup(function () {
                    var num = parseInt($('#Num').text());
                    if ($(this).val() > num) {
                        $.L.msgError('奖品数量不能大于商品数' + num);
                    }
                    else {
                        var rate = (parseInt($(this).val()) / num).toFixed(2) * 100;
                        $(this).parent().parent().next().find("input[name='Rate']").val(rate);
                        totalRate(rate);
                    }
                    return false;
                })
            }

        })

        //获取下拉框奖项
        function GetAward(index) {
            $.ajax({
                type: "post",
                url: '/Market/JackpotBox',
                async:false,
                data: { type: index },
                success: function (data) {
                    function ShowInfo(arr)
                    {
            
                        if (arr.Type === 1) {
                            var type = arr.CouponType == 0 ? "拼手气红包 " : "普通红包";
                            var domin = arr.Denomination + '元';
                            var show = '<div id="create-quan"><div><p>类型：' + type + '</p><p>面值：' + domin + '</p><p>备注：' + arr.Remark + '</p></div> <div><p>名称：' + arr.Name + '</p><p>总数：' + arr.TotalNums + '</p><p>剩余：<span id="ResidueNums"  style="text-align:left">' + arr.ResidueNums + '</span> </p></div></div>';

                        }
                        else if (arr.Type === 2) {
                            var type = arr.CouponType == 0 ? "现金优惠券" : "优惠折扣券";
                            var domin = arr.Denomination + '折';
                            var show = '<div id="create-quan"><div><p>类型：' + type + '</p><p>优惠：' + domin + '</p><p>备注：' + arr.Remark + '</p></div> <div><p>名称：' + arr.Name + '</p><p>总数：' + arr.TotalNums + '</p><p>剩余：<span id="ResidueNums"  style="text-align:left">' + arr.ResidueNums + '</span> </p></div></div>';

                        }
                        else {
                            var type = arr.Type == 1 ? "电信流量" : arr.Type == 2 ? "移动流量" : arr.Type == 3 ? "联通流量" : "通用流量";
                            var domin = arr.Denomination + 'M';
                            var show = '<div id="create-quan"><div><p>类型：' + type + '</p><p>面额：' + domin + '</p><p>备注：' + arr.Remark + '</p></div> <div><p>名称：' + arr.Name + '</p><p>总数：' + arr.TotalNums + '</p><p>剩余：<span id="ResidueNums"  style="text-align:left">' + arr.ResidueNums + '</span> </p></div></div>';
                        }
                        $(' .myTabs.nav-tabs > li.show-info #create-quan').remove();
                        $(' .myTabs.nav-tabs > li.show-info').append(show);
                    }

                    if (index == 1)
                    {
                        $('#RedPackage .JackpotID > option').remove();
                        $(data).each(function (i, arr) {
                            $('#RedPackage .JackpotID').append($('<option value=' + arr.Id + '>' + arr.Name + '</option>'));
                        });
                        var id0 = $('#RedPackage .JackpotID.form-control').val();
                        var that0 = $('#RedPackage .JackpotID.form-control');
                        $(data).each(function (i, arr) {
                            if (arr.Id == id0) {
                                $(that0).next().val(arr.CouponType).next().val(arr.Type);
                                ShowInfo(arr);
                            }
                        });
                    }
                    else if(index==2)
                    {
                        $('#Coupon .JackpotID > option').remove();
                        $(data).each(function (i, arr) {
                            $('#Coupon .JackpotID').append($('<option value=' + arr.Id + '>' + arr.Name + '</option>'));
                        });
                        var id0 = $('#Coupon .JackpotID.form-control').val();
                        var that0 = $('#Coupon .JackpotID.form-control');
                        $(data).each(function (i, arr) {
                            if (arr.Id == id0) {
                                $(that0).next().val(arr.CouponType).next().val(arr.Type);
                                ShowInfo(arr);
                            }
                        });
                    }
                    else {
                        $('#Flow .JackpotID > option').remove();
                        $(data).each(function (i, arr) {
                            $('#Flow .JackpotID').append($('<option value=' + arr.Id + '>' + arr.Name + '</option>'));
                        });
                        var id0 = $('#Flow .JackpotID.form-control').val();
                        var that0 = $('#Flow .JackpotID.form-control');
                        $(data).each(function (i, arr) {
                            if (arr.Id == id0) {
                                $(that0).next().val(arr.Type);
                                ShowInfo(arr);
                            }
                        });
                    }

                    $('.JackpotID.form-control').change(function () {
                        var id = $(this).val();
                        var that = this;
                        $(data).each(function (i, arr) {
                            if(arr.Id==id)
                            {
                                $(that).next().val(arr.CouponType).next().val(arr.Type);
                                ShowInfo(arr);
                            }
                        });
                    })
                }
            });
        }

        $("#CouponForm input[name='TotalNums'][type='number']").keyup(function () {
            var num = parseInt($('#Num').text());
            if ($(this).val() > num) {
                $.L.msgError('奖品数量不能大于商品数' + num);
            }
            else {
                var rate = (parseInt($(this).val()) / num).toFixed(2) * 100;
                $(this).parent().parent().next().find("input[name='Rate']").val(rate);
                totalRate(rate);
            }
        })

        $('#CouponForm').bootstrapValidator({
            fields: {
                Congrats: {
                    validators: {
                        notEmpty: {
                            message: '中奖提示不能为空'
                        }
                    }
                },
                Name: {
                    validators: {
                        notEmpty: {
                            message: '流量包名称不能为空'
                        }
                    }
                },
                TotalNums: {
                    validators: {
                        notEmpty: {
                            message: '奖品数量不能为空'
                        },
                        regexp: {
                            regexp: /^[1-9]\d*(\.\d+)?$/,
                            message: '奖品数量不能小于0'
                        }
                    }
                }
            }
        });
        $('#FlowForm').bootstrapValidator({
            fields: {
                Congrats: {
                    validators: {
                        notEmpty: {
                            message: '中奖提示不能为空'
                        },
                    }
                },
                Name: {
                    validators: {
                        notEmpty: {
                            message: '流量包名称不能为空'
                        },
                    }
                },
                TotalNums: {
                    validators: {
                        notEmpty: {
                            message: '奖品数量不能为空'
                        },
                        regexp: {
                            regexp: /^[1-9]\d*(\.\d+)?$/,
                            message: '奖品数量不能小于0'
                        }
                    }
                },
            }
        });
        $('#redPacketForm').bootstrapValidator({
            fields: {
                Congrats: {
                    validators: {
                        notEmpty: {
                            message: '中奖提示不能为空'
                        },
                    }
                },
                Name: {
                    validators: {
                        notEmpty: {
                            message: '红包名称不能为空'
                        },
                    }
                },
                TotalNums: {
                    validators: {
                        notEmpty: {
                            message: '奖品数量不能为空'
                        },
                        regexp: {
                            regexp: /^[1-9]\d*(\.\d+)?$/,
                            message: '奖品数量不能小于0'
                        }
                    }
                },
            }
        });
    })
</script>

